<h2>Edit Recipe</h2>
<form name="recipeForm" ng-submit="save()" class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="title">Title:</label>

        <div class="controls">
            <input ng-model="recipe.title" class="input-xlarge" id="title" focus required>
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="description">Description:</label>

        <div class="controls">
            <textarea ng-model="recipe.description" class="input-xlarge" id="description"></textarea>
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="ingredients">Ingredients:</label>

        <div class="controls">
            <ul id="ingredients" class="unstyled" ng-controller="IngredientsCtrl">
                <li ng-repeat="ingredient in recipe.ingredients">
                    <input ng-model="ingredient.amount" class="input-mini">
                    <input ng-model="ingredient.amountUnits" class="input-small">
                    <input ng-model="ingredient.ingredientName">
                    <button type="button" class="btn btn-mini" ng-click="removeIngredient($index)"><i class="icon-minus-sign"></i> Delete</button>
                </li>
                <button type="button" class="btn btn-mini" ng-click="addIngredient()"><i class="icon-plus-sign"></i> Add</button>
            </ul>
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="instructions">Instructions:</label>

        <div class="controls">
            <textarea ng-model="recipe.instructions" class="input-xxlarge" id="instructions"></textarea>
        </div>
    </div>

    <div class="form-actions">
        <button class="btn btn-primary" ng-disabled="recipeForm.$invalid">Save</button>
        <button type="button" ng-click="remove()" ng-show="!recipe.id" class="btn">Delete</button>
    </div>
</form>
